<template>
  <!--      用户信息-->
  <div class="user_info">
    <div class="user_avatar_name">
            <span>
           <el-avatar
             :src=userInfo.avatar
             style="width: 50px;height: 50px"></el-avatar>
              <!--          头像-->
        </span>
      <span class="user_name">
<!--          用户名-->
          {{ userInfo.name }}
        </span>
    </div>
    &nbsp;
    <span class="user_login">

          <el-link type="danger" v-show="this.userInfo.name=='游客您好'"><router-link
            to="/login">去登录</router-link></el-link>
          <el-link type="danger" class="hello" v-show="this.userInfo.name!='游客您好'">您好</el-link>
        </span>
    &nbsp;
    <span class="user_register">
              <el-link type="danger"><router-link to="/register">去注册</router-link></el-link>
        </span>
    &nbsp;
    <el-link type="danger" class="hello" v-show="this.userInfo.name!='游客您好'" @click=removeSBMessage()>退出登录</el-link>
    &nbsp;&nbsp;
  </div>
</template>

<script>
import cookie from "js-cookie";
export default {
  name: "UserMessage",
  mounted() {
    //获取登录的用户信息
    this.getSBMessage()
  },
  data(){
    return{
      userInfo: {
        avatar: require('@/assets/avatar.png'),
        name: "游客您好"
      },
    }
  },
  methods: {
    /**
     * 获得用户信息
     */
    getSBMessage() {
      /**sessionStorage的获取
       *  const sessionInfo = JSON.parse(sessionStorage.getItem('getSBMessage'));
       *             this.userInfo
       */
      let userStr = cookie.get('scs_user')
      if (userStr) {
        //把字符串转换json对象
        let userInfo = JSON.parse(userStr);
        this.userInfo = userInfo
      }
    },

    /**
     * 退出删除用户token
     */
    removeSBMessage() {
      cookie.remove('token')
      cookie.remove('scs_user')
      location.replace("/")
    }
  }
}
</script>

<style scoped>
.user_info {
  display: inline-flex;
  flex-wrap: nowrap;
  background-color: #9aa8bb;
  align-items: center;
  border-radius: 25px;
}

.user_avatar_name {
  display: inline-flex;
  align-items: center;
}

.user_login, .user_register {
  color: black;
  margin-bottom: 4px;
}

.hello {
  color: black;
}

</style>
